import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import './portal.css'

export default function App() {
    const [isShow, setIsShow] = useState(false)
  return (
    <div className='box'>
        <div className='left'></div>
        <div className='right'>
            <button onClick={()=>{
                setIsShow(true)
            }}>出现弹窗</button>
            {isShow && <Dialog onClose={()=>{
                setIsShow(false);
            }}></Dialog>}
        </div>
    </div>
  )
}

function Dialog(props){
    return (
        createPortal(<div style={{backgroundColor:'rgba(0,0,0,0.7)', width:'100%',height:'100%',position:'fixed',top:0,left:0}}>
            <button onClick={props.onClose}>关闭弹窗</button>
        </div>,document.body)    //传送到该节点中进行显示
    )
}